<template>
	<view class="application">
		<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="lower">
			<view class="list">
				<view class="rightItem" style="height: 80rpx;" @click="handleAdd">
					<view class="add">
						<uni-icons type="plusempty" style="font-size: 80rpx;color: #999;"></uni-icons>
					</view>
				</view>
				<view class="listItem" v-for="item,index in data" :key="item.Id+index" @click="handleList(item)">
					<view class="title">
						<view class="text">
							<text class="t">{{item.Name}}</text>
							<view @click.stop="changeName(item,index)">
								<uni-icons type="compose" color="#007aff"></uni-icons>
							</view>
						</view>
						<view @click.stop="handleListDel(item.Id)">
							<uni-icons type="trash" class="color"></uni-icons>
						</view>
					</view>
					<view class="userInfo">
						<view v-if="item.VIPUserInfoList">
							<view class="tag-view" v-if="item.VIPUserInfoList.length<=3">
								<image class="iconImg" v-for="(im,iex) in item.VIPUserInfoList" :key="im.UserId+iex"
									:src="im.UserIcon||'/static/paiLogo.png'" mode=""></image>
							</view>
							<view class="tag-view" v-else>
								<image class="iconImg" v-for="im in 3" :key="im"
									:src="item.VIPUserInfoList[im-1].UserIcon||'/static/paiLogo.png'" mode=""></image>
								<uni-icons type="more-filled" size="20"></uni-icons>
							</view>
						</view>
						<view class="time">
							{{item.CreateTime?item.CreateTime.substring(0,19):''}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title="发起任务" type="info"
				@close="$refs.inputDialog.close()" @confirm="dialogInputConfirm" before-close>

				<uni-forms :modelValue="formData" ref="form" label-position="left" :rules="rules">
					<uni-forms-item label="任务标题" name="name" required :label-width="80">
						<uni-easyinput type="text" v-model="formData.Name" placeholder="请输入任务名称" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="namePopup" type="dialog">
			<uni-popup-dialog mode="input" title="任务名称" :value="selectItem.Name" placeholder="请输入任务名称"
				@confirm="changeNameConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			pid: {
				require: true,
				type: String
			},
			pName: {
				require: true,
				type: String
			},
		},
		mounted() {
			// this.getDataList()
			// console.log(this.$route);
		},
		data() {
			return {
				rules: {
					Name: {
						rules: [{
							required: true,
							errorMessage: '请输入项目名称',
						}]
					},
				},
				formData: {},
				entity: {
					AppyId: "1620239917378441218",
					AppyName: "巡检GO",
				},
				data: [],
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "Id",
					SortType: "desc",
				},
				total: 0,
				status: 0,
				selectIndex: 0,
				selectItem: {}
			}
		},
		methods: {
			// 更改任务名称
			changeName(item, index) {
				this.selectItem = item
				this.selectIndex = index
				this.$refs.namePopup.open()
			},
			changeNameConfirm(e) {
				if (!e) return uni.showToast({
					icon: 'none',
					title: '请填写任务名称'
				})
				this.selectItem.Name = e
				this.$http('Base_TaskWork/Base_Task/SaveData', this.selectItem).then(res => {
					if (res.Success) {
						this.data[this.selectIndex].Name = this.selectItem.Name
						uni.showToast({
							icon: 'none',
							title: '操作成功'
						})
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			dialogInputConfirm() {
				this.$refs.form.validate().then(res => {
					console.log(res);
					if (!this.formData.Name) return uni.showToast({
						icon: 'none',
						title: '请填写任务名称'
					})
					uni.showLoading()
					this.$http('Base_TaskWork/Base_Task/SaveData', {
						...this.formData,
						...this.entity,
						ProjectId: this.pid,
						Status: 0
					}).then(res => {
						uni.hideLoading()
						if (res.Success) {
							this.$refs.inputDialog.close()
							this.getDataList()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			handleAdd() {
				this.formData = {
					user: []
				}
				this.$refs.inputDialog.open()
			},
			// 触底事件
			lower() {
				if (this.data.length >= this.total) return
				uni.showLoading()
				this.pagination.PageIndex++
				this.$http("Base_TaskWork/Base_Task/GetTaskDTOList", {
						...this.pagination,
						Search: {
							"ProjectId": this.pid,
							"Status": this.status,
							"Condition": "AppyId",
							"Keyword": "1620239917378441218",
						}
					})
					.then((res) => {
						uni.hideLoading()
						if (res.Success) {
							this.data = this.data.concat(res.Data)
							this.total = res.Total
						}
					});
			},
			handleList(item) {
				let obj = {
					...item,
					VIPUserInfoList: [],
					pName: this.pName,
				}
				console.log(123);
				console.log(obj);
				let newobj = {
					rwId: obj.Id,
					rwName: obj.Name,
					xmId: obj.ProjectId,
					xmName: obj.pName
				}
				uni.setStorageSync('RwInfo', newobj)
				uni.switchTab({
					url: '/pages/Inspection/Inspection'
				})
			},
			handleListDel(id) {
				uni.showModal({
					title: '提示',
					content: '此操作将删除当前任务,确认删除吗?',
					success: (val) => {
						if (val.cancel) return
						this.$http('Base_TaskWork/Base_Task/TaskDeleteData', [id]).then(res => {
							if (res.Success) {
								this.getDataList()
								uni.showToast({
									icon: 'none',
									title: '操作成功'
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.Msg
								})
							}
						})
					}
				})
			},
			getDataList(status) {
				uni.showLoading()
				this.status = status || ''
				this.pagination.PageIndex = 1
				console.log("status: ", this.status);
				this.$http("Base_TaskWork/Base_Task/GetTaskDTOList", {
						...this.pagination,
						Search: {
							"ProjectId": this.pid,
							"Status": this.status,
							"Condition": "AppyId",
							"Keyword": "1620239917378441218",
						}
					})
					.then((res) => {
						uni.hideLoading()
						if (res.Success) {
							this.data = res.Data;
							this.total = res.Total
						}
					});
			},
		}
	}
</script>

<style scoped lang="scss">
	.color {
		color: red !important;
	}

	.application {
		height: 100%;

		.list {
			box-sizing: border-box;
			padding: 20rpx 0;

			.listItem {
				width: 80%;
				// height: 130rpx;
				background-color: #fff;
				box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.1);
				margin: 30rpx auto;
				margin-top: 0;
				box-sizing: border-box;
				padding: 15rpx;
				border-radius: 20rpx;

				.add {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.title {
					font-size: 14px;
					font-weight: bold;
					font-weight: 600;
					display: flex;
					justify-content: space-between;

					.text {
						flex: 1;
						display: flex;
						padding-right: 20rpx;

						.t {
							width: 320rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.color {
						width: 60rpx;
					}
				}

				.userInfo {
					// display: flex;
					font-size: 12px;
					justify-content: space-between;
					margin-top: 10rpx;
					align-items: center;

					.tag-view {
						flex: 1;

						.uni-icons {
							vertical-align: super;
							margin-left: 5px;
						}

						.iconImg {
							width: 28px;
							height: 28px;
							border-radius: 50%;
						}
					}

					.time {
						color: #999;
					}
				}
			}
		}
	}

	/deep/.uni-dialog-content {
		display: block;
	}
</style>